<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&callback=googleMap.processor"></script>

	</head>
	<body>
		<h1><?php echo $title; ?></h1>


		<div class="mapContainer" style="height:400px;"></div>

		<script type="text/javascript">

			var googleMap = {};
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				init: {lat: -34.397, lng: 150.644},
				other: {lat: -34.397, lng: 150.644},
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.init,
					zoom: 6
				},
				other: {
					center: googleMap.points.geolocation,
					zoom: 6
				},

			};

			googleMap.processor = function() {
				this.init();
				this.other();
			};

			googleMap.init = function() {
				this.mapHandle = new google.maps.Map(this.container, this.options.init);

				return this;
			};

			googleMap.marker = function() {
				var marker = new google.maps.Marker({
					position: this.points.marker,
					map: this.mapHandle
				});

				return this;
			};

			googleMap.other = function() {
				this.mapHandle.setCenter({lat: 36.964, lng: -122.015});
				this.mapHandle.setZoom(18);
				this.mapHandle.setMapTypeId('satellite');
				this.mapHandle.setTilt(45);

/*

缩放控件：显示“+”和“-”按钮，用于更改地图的缩放比例。此控件默认显示在地图右下角。
地图类型控件：具有下拉菜单和水平按钮栏两种样式可供选择，让用户能够选择地图类型（ROADMAP、SATELLITE、HYBRID 或 TERRAIN）。此控件默认显示在地图左上角。
街景视图控件：其中包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。此控件默认显示在地图右下角。
旋转控件：用于为含有倾斜图像的地图提供倾斜和旋转选项组合。此控件默认显示在地图右下角。有关详细信息，请参阅 45° 图像。
比例控件：用于显示地图比例元素。此控件默认处于禁用状态。
全屏控件提供以全屏模式打开地图的选项。默认情况下，此控件在移动设备上处于启用状态，在桌面设备上处于停用状态。注：iOS 不支持全屏功能。因此，全屏控件在 iOS 设备上不可见。
				{
					zoomControl: boolean,
					mapTypeControl: boolean,
					scaleControl: boolean,
					streetViewControl: boolean,
					rotateControl: boolean,
					fullscreenControl: boolean
				};
 */

				this.mapHandle.setOptions({
					// scaleControl: true,
					fullscreenControl: true
				});
				
				return this;
			};



			


		</script>






	</body>
</html>
